<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增充值管理')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-record-add">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">会员号码：</label>
            <select class="col-sm-6" name="memberId" id="memberId">
                <option value="">----请选择会员----</option>
            </select>
        </div>

        <!--根据充值金额自动判断等级-->
        <div class="form-group">
            <label class="col-sm-3 control-label">充值金额：</label>
            <div class="col-sm-5">
                <div class="input-group m-b"><span class="input-group-addon">&yen;</span>
                    <input type="number" name="rechargeAmount" class="form-control" required> <span
                            class="input-group-addon">.00</span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-5">
                <div class="input-group m-b"><i class="fa fa-info-circle"></i>
                    <span class="help-block">
                            充值金额达到一定金额自动升级
                        </span>
                </div>
            </div>
        </div>
        <br>
        <br>
        <br>
        <div class="form-group">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-5">
                <button type="button" class="btn btn-w-m btn-primary" onclick="submitAddRecord()">提交</button>
            </div>
        </div>

    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-css"/>
<th:block th:include="include :: select2-js"/>

<script th:inline="javascript">
    var prefix = ctx + "custom/record"
    var prefixMember = ctx + "custom/member"

    $("#form-record-add").validate({
        focusCleanup: true
    });

    function submitAddRecord() {
        //判断是否选择了数据
        if ($('#memberId').val() === "" || $('#memberId').val() === null) {
            $.modal.msgWarning("请先选择会员");
            return;
        }

        //判断充值金额是否达到100
        var rechargeAmount = $('input[name="rechargeAmount"]').val();
        if (rechargeAmount < 100) {
            $.modal.msgWarning("充值金额必须大于等于100");
            return;
        }

        $.modal.confirm("确认提交?", function () {
            // 打开遮罩层
            $.modal.loading("正在充值，请稍后...");
            $.operate.save(prefix + "/add", $('#form-record-add').serialize(), function (rs) {
                $.modal.closeLoading();
                check(rs)
            })
        })
    }

    // 选择会员卡号模糊搜索
    $("#memberId").select2({
        ajax: {
            url: prefixMember + "/listByPhone",
            dataType: 'json',
            delay: 1000,
            data: function (params) {
                return {
                    phone: params.term,
                };
            },
            processResults: function (data) {
                var array = data.rows;
                // 使用map方法从数组中提取并只保留每个对象中的id和phone字段
                var idAndPhoneArray = array.map(function (item) {
                    return {
                        id: item.id,
                        text: item.phone + "--" + item.name + " $" + item.balance,
                    };
                });
                return {
                    results: idAndPhoneArray
                };
            },
            cache: true
        },
        placeholder: '请输入电话搜索...',
        escapeMarkup: function (markup) {
            return markup;
        },
        minimumInputLength: 6,
    });

    // 弹出检查
    function check(rs) {
        if (rs.code === 500) {
            $.modal.msgError("系统错误!,请联系管理员");
        } else if (rs.code === 0) {
            $.modal.msgSuccess("添加成功!");
            // 关闭选项卡
            $.modal.closeTab();
        } else {
            $.modal.msgWarning(rs.message);
        }
    }

</script>
</body>
</html>